import { reactive, toRefs } from 'vue';
import { getLightColor } from '@/utils/common/index.js';

const defaultValue = {
	primaryColor: '',
	secondaryColor: ''
};

setDilutionColor('primaryColor');

/*颜色变浅*/
function setDilutionColor(mainKey) {
	for (let i = 1; i < 10; i++) {
		defaultValue[`${mainKey}__light${i}`] = defaultValue.primaryColor ? getLightColor(defaultValue.primaryColor, i /
			10) : '';
	}
}

let colorInfo = reactive(defaultValue);


export function useSetThemColor(primaryColor, secondaryColor) {
	colorInfo.primaryColor = primaryColor;
	colorInfo.secondaryColor = secondaryColor;
	setDilutionColor('primaryColor');
}

export function useGetThemColor() {
	return toRefs(colorInfo);
}